<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据操作</title>
    <style>
        body {
            font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #34495e;
        }

        .inputs {
            padding: 5px 5px;
        }

        #removelabel {
            display: block;
            margin: 15px 0;
        }

        #remove {
            margin-left: 8px;
            padding: 3px 12px;
            background-image: linear-gradient(to bottom, #fff, #d1d1d1);
            outline: 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
        }

        #remove:active {
            background-image: linear-gradient(to top, #fff, #d1d1d1);
        }

        .display {
            margin-bottom: 10px;
        }

        .label-text {
            padding: 0 20px;
            display: inline-block;
            border-bottom: 1px solid #333;
        }
    </style>
    <script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
</head>

<body>
    <h1>数据操作</h1>
    <div id="app"></div>
    <script>
        // var MyApp = san.defineComponent({
        //     template: '<p>Hello {{ name }} ! </p>',
        //     initData: function () {
        //         return {
        //             name: 'San'
        //         }
        //     }
        // })
        // var myApp = new MyApp();
        // myApp.attach(document.getElementById("app"));

        // var MyApp = san.defineComponent({
        //     template: '<ul><li s-for="item in list">{{item}}</li></ul>',

        //     attached: function () {
        //         this.data.set('list', ['san', 'er', 'esui', 'etpl', 'esl']);
        //     }
        // });
        // var myApp = new MyApp();
        // myApp.attach(document.getElementById("app"));

        // var MyApp = san.defineComponent({
        //     template: '' +
        //         '<div>' +
        //         '<input value="{= name =}" placeholder="please input">' +
        //         'Hello {{name}}!' +
        //         '</div>'
        // });
        // var myApp = new MyApp();
        // myApp.attach(document.getElementById("app"));

        var MyApp = san.defineComponent({
            // template: `
            // <div>
            //     <input type="text" value="{= name =}" id="name" class="inputs" placeholder="姓名（string）">
            //     <input type="text" value="{= age =}" id="age" class="inputs" placeholder="年龄（string）">
            //     <input type="text" value="{= intro =}" id="intro" class="inputs" placeholder="简介（string）">
            //     <label id="removelabel" for="remove">信息:
            //         <button on-click="init" id="remove">移除信息</button>
            //     </label>
            //     <div class="display">姓名：<label class="label-text" id="nametext">{{name}}</label></div>
            //     <div class="display">年龄：<label class="label-text" id="agetext">{{age}}</label></div>
            //     <div class="display">简介：<label class="label-text" id="introtext">{{intro}}</label></div>
            // </div>
            // `,
            template: `
            <div>
                <input type="text" value="{= user.name =}" id="name" class="inputs" placeholder="姓名（string）">
                <input type="text" value="{= user.age =}" id="age" class="inputs" placeholder="年龄（string）">
                <input type="text" value="{= user.intro =}" id="intro" class="inputs" placeholder="简介（string）">
                <label id="removelabel" for="remove">信息:
                    <button on-click="init" id="remove">移除信息</button>
                </label>
                <div class="display">姓名：<label class="label-text" id="nametext">{{user.name}}</label></div>
                <div class="display">年龄：<label class="label-text" id="agetext">{{user.age}}</label></div>
                <div class="display">简介：<label class="label-text" id="introtext">{{user.intro}}</label></div>
            </div>
            `,
            initData: function () {
                // return {
                //     name: '',
                //     age: '',
                //     intro: ''
                // };
                return {
                    user: {
                        name: '',
                        age: '',
                        intro: ''
                    }
                };
            },
            init: function () {
                // this.data.set('name', '');
                // this.data.set('age', '');
                // this.data.set('intro', '');
                console.log(123);
                this.data.set('user', {
                    name: '',
                    age: '',
                    intro: ''
                });
            }
        });
        var myApp = new MyApp();
        myApp.attach(document.getElementById("app"));
        console.log();
    </script>
</body>

</html>